import React, { useEffect, useState, useRef, MutableRefObject } from "react"
import "./Message.scss"
import { message } from "../../utils/interface"
import { Messages } from "../../services/classify"
import Bscroll from "better-scroll"

const Message: React.FC = () => {
    const [messageList, setMessageList] = useState<message[]>([])
    const [index, setIndex] = useState(1)
    const [flag, setFlag] = useState(false)

    let scll: MutableRefObject<any> = useRef()
    useEffect(() => {
        getList()
    }, [index]);
    useEffect(() => {
        let myScroll = new Bscroll('.message', {
            scrollY: true,
            click: true,
            pullDownRefresh: {
                threshold: 100,
                stop: 50,
            }
        })
        myScroll.on('pullingDown', () => {
            alert('刷新成功')
            Messages(1).then(res => {
                setMessageList(res.data.dataList)
                setFlag(true)
                setIndex(1)
                myScroll.finishPullDown()
                myScroll.refresh()
                setFlag(false)
            })
        })
    }, [])
    async function getList() {
        if (flag) {
            return
        }
        setFlag(true)
        let res = await Messages(index)
        setFlag(false)
        if (index === 1) {
            setMessageList(res.data.dataList)
        } else {
            setMessageList([...res.data.dataList, ...messageList])
        }
    }
    function scrollUp(e: React.UIEvent<HTMLDivElement, UIEvent>) {
        if (flag) {
            return
        }
        if (e.currentTarget.scrollTop + e.currentTarget.clientHeight > (scll.current as HTMLDivElement).clientHeight - 20) {
            let num = index + 1
            console.log(num)
            setIndex(num)
        }
    }
    return <div className="message" onScroll={scrollUp}>
        <div ref={scll} >
            {
                messageList.map((item, index) => {
                    return <div key={index}>
                        <div className='image'>
                            <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2984" width="50" height="50"><path d="M311.8 169.2L253.6 111C156.4 185.1 92.1 300.2 86 430.4h81.4c6.1-107.8 61.4-202.2 144.4-261.2z m544.8 261.2H938C931.9 300.2 867.6 185 770 111l-58.2 58.2c83.4 59 138.7 153.4 144.8 261.2z m-80.1 20.4c0-124.9-86.7-229.5-203.4-257.1V166c0-33.8-27.3-61-61-61-33.8 0-61 27.3-61 61v27.7c-116.8 27.7-203.4 132.2-203.4 257.1v223.8L166.3 756v40.7H858V756l-81.4-81.4V450.8zM512 918.7c5.7 0 11-0.4 16.3-1.6 26.4-5.3 48.4-23.6 58.6-48 4.1-9.8 6.5-20.3 6.5-31.7H430.6c0 44.7 36.6 81.3 81.4 81.3z m0 0" p-id="2985"></path></svg>
                        </div>
                        <div className='title'>
                            <p>{item.title}</p>
                            <p>{item.sendDate}</p>
                        </div>
                    </div>
                })
            }
        </div>
    </div>
}
export default Message